import { IGeoFile } from '@/types/geofile'
import { ref } from 'vue'
import useDayjsHelper from '../useDayjsHelper'
import dayjs from 'dayjs'
import { clone, isNumber, max } from 'lodash'
import { useEchartOption } from '..'
import { EChartsCoreOption, EChartsOption, graphic } from 'echarts'

const { calcDateSpan } = useDayjsHelper()

const { areaOption: barOptionTemplate, objectMutationDetectOption } =
    useEchartOption()

function useOverlayAnalysis() {
    // TODO: overlay    echart config
    const areaOption = ref<EChartsOption>({
        grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        // toolbox:{
        //     feature:{
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            type: 'category',
            data: [],
            boundaryGap: true,
            axisLabel:{
                color:"#fff",
            },
        },
        tooltip: {},
        yAxis: {
            type: 'value',
            axisLabel:{
                color:"#fff",

            },
            splitLine: {
                lineStyle: {
                    color: '#434343',
                    opacity: 0.6,
                },
            },
            splitArea: {},
        },
        series: [
            {
                data: [
                    150,
                    230,
                    {
                        value: 120,
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#ffa442' },
                                { offset: 0.5, color: '#ffa44273' },
                                { offset: 1, color: '#ffa44228' },
                            ]),
                        },
                    },
                    218,
                    135,
                ],
                type: 'bar',
                itemStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#42a4ff' },
                        { offset: 0.5, color: '#188ff073' },
                        { offset: 1, color: '#188ff028' },
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffa442' },
                            { offset: 0.5, color: '#ffa44273' },
                            { offset: 1, color: '#ffa44228' },
                        ]),
                    },
                },
            },
        ],
    })

    function setAreaOption(data: IGeoFile[]) {
        const chartData = new Map<string, number>()

        const startDate = data[0].created_time!

        const endDate = data[data.length - 1].created_time!

        const dateSpan = calcDateSpan(startDate, endDate)

        let date_format: string

        if (dateSpan == 'day') {
            date_format = 'YYYY-MM-DD'
        } else if (dateSpan == 'month') {
            date_format = 'YYYY-MM'
        } else if (dateSpan == 'year') {
            date_format = 'YYYY'
        } else {
            date_format = 'YYYY-MM-DD'
        }

        data.forEach((item) => {
            const { created_time } = item

            const date = dayjs(created_time).format(date_format)

            const curDate = chartData.get(date)

            if (curDate) {
                chartData.set(date, curDate + 1)
            } else {
                chartData.set(date, 1)
            }
        })

        const xAxisData = Array.from(chartData.keys())
        const yAxisData = Array.from(chartData.values())

        const maxNum = max(yAxisData)

        areaOption.value.xAxis!.data = xAxisData

        areaOption.value.series[0].data = yAxisData.map((item) => {
            if (item == maxNum) {
                return {
                    value: item,
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffa442' },
                            { offset: 0.5, color: '#ffa44273' },
                            { offset: 1, color: '#ffa44228' },
                        ]),
                    },
                }
            } else {
                return item
            }
        })
    }

    const countryOption = ref({
        grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: [] as string[],
            boundaryGap: true,
            axisLabel:{
                color:"#fff",
            },
        },
        // toolbox:{
        //     feature:{
        //         saveAsImage: {}
        //     }
        // },
        tooltip: {},
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: '#434343',
                    opacity: 0.6,
                },
            },
            axisLabel:{
                color:"#fff",
            },
            splitArea: {},
        },
        series: [
            {
                data: [
                    150,
                    230,
                    {
                        value: 120,
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#ffa442' },
                                { offset: 0.5, color: '#ffa44273' },
                                { offset: 1, color: '#ffa44228' },
                            ]),
                        },
                    },
                    218,
                    135,
                ],
                type: 'bar',
                itemStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#42a4ff' },
                        { offset: 0.5, color: '#188ff073' },
                        { offset: 1, color: '#188ff028' },
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffa442' },
                            { offset: 0.5, color: '#ffa44273' },
                            { offset: 1, color: '#ffa44228' },
                        ]),
                    },
                },
            },
        ],
    })

    function setCountryOption(data: IGeoFile[]) {
        const chartData = new Map<string, number>()

        data.forEach((item) => {
            const curCountry = item.details?.properties?.country || '其他'

            const curItem = chartData.get(curCountry)

            if (isNumber(curItem)) {
                chartData.set(curCountry, curItem + 1)
            } else {
                chartData.set(curCountry, 1)
            }
        })

        const xAxisData = Array.from(chartData.keys())
        const yAxisData = Array.from(chartData.values())

        const maxNum = max(yAxisData)

        countryOption.value.xAxis!.data = xAxisData

        countryOption.value.series[0].data = yAxisData.map((item) => {
            if (item == maxNum) {
                return {
                    value: item,
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffa442' },
                            { offset: 0.5, color: '#ffa44273' },
                            { offset: 1, color: '#ffa44228' },
                        ]),
                    },
                }
            } else {
                return item
            }
        })

        // ...
    }

    return {
        areaOption,
        setAreaOption,

        countryOption,
        setCountryOption,
    }
}

export default useOverlayAnalysis
